<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="90px">
          <el-col :span="8">
             <el-form-item  label="客户名称">
              <el-select v-model="listQuery.fsiteNo" :disabled="this.$store.state.user.fsiteLevel==3" clearable filterable class="filter-item" placeholder="请选择客户名称">
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商名称">
              <el-input
                v-model="listQuery.fsupname"
                clearable
                class="filter-item"
                placeholder="请输入供应商名称"
              />
            </el-form-item>
          </el-col>
          <template v-if="showAll">
            <el-col :span="8">
            <el-form-item
              label="供应商类型"
              prop="ftype"

            >
              <el-select
                v-model="listQuery.ftype"
                clearable
                placeholder="请选择供应商类型"
              >
                <el-option
                  v-for="item in fdicttypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人">
              <el-input
                v-model="listQuery.flinkman"
                clearable
                class="filter-item"
                placeholder="请输入联系人"
              />
            </el-form-item>
          </el-col>
          </template>
          <el-col :span="8">
            <el-form-item>
              <el-button
              type="primary"
                @click="handleFilter"
              >查找</el-button
              >
              <el-button
              type="success"
                @click="handleCreate"
              >添加</el-button
              >
              <el-button  type="info" @click="handleUpload">导入</el-button>
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true"
                v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
       <!-- 查询结果 -->
        <JNPF-table
          v-loading="listLoading"
          :data="list"
        >
          <el-table-column :width="buttonColor.operationTwo" align="center" label="操作" class-name="small-padding">
            <template slot-scope="scope">
              <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column
            :width="buttonColor.line"
            :index="indexMethod"
            align="center"
            label="序号"
            type="index"
          />
          <el-table-column v-if="this.$store.state.user.fsiteLevel!=3" :formatter="formatfsiteNo" width="200" align="center" label="客户名称" prop="fsiteNo" />
          <el-table-column :width="buttonColor.billno" align="left" label="供应商编号" prop="fsupno" />
          <el-table-column :width="buttonColor.name" align="left" label="供应商名称" prop="fsupname" />
          <el-table-column :width="buttonColor.user" :formatter="formatFdicttype" align="left" label="供应商类型" prop="ftype" />
          <el-table-column :width="buttonColor.user" align="left" label="联系人" prop="flinkman" />
          <el-table-column align="left" label="手机" prop="fphone" />
          <el-table-column align="left" label="邮箱" prop="femail" />
          <el-table-column align="left" label="办公地址" prop="fofficeaddress" />
        </JNPF-table>
        <paginations
        :total="total"
        :page.sync="listQuery.currentPage"
        :limit.sync="listQuery.pageSize"
        />
      </div>
    </div>
    <!-- 添加或修改对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :title="textMap[dialogStatus]"
      width="80%"
    >
    <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="100px" ref="dataForm" :rules="rules" :model="dataForm">
          <el-col :span="8">
            <el-form-item  label="供应商编号" prop="fsupno">
              <el-input
              :disabled="dialogStatus!='create'"
                v-model="dataForm.fsupno"
                placeholder="请输入供应商编号"
            /> </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="客户名称"
              prop="fsiteNo"

            >
              <el-select v-model="dataForm.fsiteNo" :disabled="this.$store.state.user.fsiteLevel==3" clearable filterable class="filter-item" placeholder="请选择客户名称">
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="供应商名称"
              prop="fsupname"
            >
            <el-input v-model="dataForm.fsupname" placeholder="请输入供应商名称" /> </el-form-item>
          </el-col>
          <el-col :span="8">
             <el-form-item label="联系人" prop="flinkman">
            <el-input v-model="dataForm.flinkman" placeholder="请输入联系人" /> </el-form-item
            >
          </el-col>
          <el-col :span="8">
             <el-form-item label="邮箱" prop="femail">
            <el-input v-model="dataForm.femail" placeholder="请输入邮箱" /> </el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机" prop="fphone">
            <el-input v-model="dataForm.fphone" placeholder="请输入手机号" /> </el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话" prop="ftelno">
            <el-input v-model="dataForm.ftelno" placeholder="请输入电话" /> </el-form-item
            >
          </el-col>
          <el-col :span="8">
            <el-form-item label="省份" prop="fprovince">
          <el-input v-model="dataForm.fprovince" placeholder="请输入省份" /> </el-form-item
          >
          </el-col>
          <el-col :span="8">
            <el-form-item label="城市" prop="fcity">
          <el-input v-model="dataForm.fcity" placeholder="请输入城市" /> </el-form-item
          >
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="供应商类型"
              prop="ftype"
            >
              <el-select
                v-model="dataForm.ftype"
                clearable
                placeholder="请选择供应商类型"
              >
                <el-option
                  v-for="item in fdicttypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="状态"
              prop="fstate"
            >
              <el-select
                v-model="dataForm.fstate"
                clearable
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in fstateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
            label="地址"
            prop="fofficeaddress"
          >
          <el-input v-model="dataForm.fofficeaddress" placeholder="请输入地址" /> </el-form-item
          >
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="dialogFormVisible = false" type="info" >取消</el-button>
        <el-button
          v-if="dialogStatus == 'create'"
          @click="createData"
          type="primary"
        >确定</el-button
        >
        <el-button v-else  @click="updateData" type="primary">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  listtsSupplier,
  createtsSupplier,
  updatetsSupplier,
  deletetsSupplier
} from '@/api/tsSupplier'
import { fsiteOptionsByLevel, uploadPath2 } from '@/api/area'
import { getToken } from '@/utils/auth'
import { getListArea } from '@/api/area'
import Pagination from '@/components/Pagination'
import moment from 'moment'
import { tableColor, titleColor, exportColor, buttonColor } from '@/filters/index'
import { getApiUrl } from '@/utils/request'
const siteTypeMap = {
  1: '正常',
  0: '禁用'
}

export default {
  name: 'tsSupplier',
  components: { Pagination },
  filters: {
    siteTypeFilter(type) {
      return siteTypeMap[type]
    }
  },
  data() {
    return {
      fdicttypeList: [],
      clientHeight: 0,
      showAll:false,
      uploadPath2,
      downUrl: null,
      uploadVisible: false,
      buttonColor: buttonColor,
      getListfsiteNo: null,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        fsupname: undefined,
        fsiteNo: undefined,
        fprovince: undefined,
        fcity: undefined,
        flinkman: undefined,
        fphone: undefined,
        ftelno: undefined,
        femail: undefined,
        fofficeaddress: undefined,
        fupddate: undefined,
        foperator: undefined,
        ftype: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      fstateOptions: [
        { value: 1, label: '正常' },
        { value: 0, label: '禁用' }
      ],
      dataForm: {
        fsupno: undefined,
        fsupname: undefined,
        fstate: undefined,
        fsiteNo: undefined,
        fprovince: undefined,
        fcity: undefined,
        flinkman: undefined,
        fphone: undefined,
        ftelno: undefined,
        femail: undefined,
        fofficeaddress: undefined,
        fupddate: undefined,
        foperator: undefined,
        ftype: undefined,
        id: undefined,
        faccbank:'',
        faccname:'',
        faccno:'1',
        fcorptaxno:'1',
        fsupkind:'1',
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      tableColor,
      titleColor,
      exportColor,
      rules: {
        fsupno: [{ required: true, message: '供应商编号不能为空' }],
        fsupname: [{ required: true, message: '供应商名称不能为空' }],
        fsiteNo: [{ required: true, message: '客户名称不能为空' }],
        ftype: [{ required: true, message: '供应商类型不能为空' }]
      }
    }
  },
  computed: {
    headers() {
      return {
        'Authorization': getToken()
      }
    }
  },
  created() {
    this.clientHeight = document.documentElement.clientHeight - 190
    this.downUrl = getApiUrl() + 'xlsx/1-3供应商资料.xlsx'
    if (this.$store.state.user.fsiteLevel == 3) {
      this.listQuery.fsiteNo = this.$store.state.user.fsiteNo
    }
    this.getList()
    // 用户名称
    fsiteOptionsByLevel(3)
      .then(response => {
        this.getListfsiteNo = response.data.data.list
      })
      .catch(() => {
        this.getListfsiteNo = []
      })
    getListArea({ flag: 34, arg1: 2018 })
      .then(response => {
        this.fdicttypeList = response.data.data.list
      })
      .catch(() => {
        this.fdicttypeList = []
      })
  },
  methods: {
    uploadFileSuccess: function(response) {
      this.uploadVisible = false
      this.$notify.success({
        title: '导入',
        dangerouslyUseHTMLString: true,
        message: response.data
      })
    },
    handleUpload() {
      this.uploadVisible = true
    },
    datetimeFormat(row, column) {
      const date = row[column.property]
      if (date === undefined || date === null) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },
    // 供应商类型
    formatFdicttype: function(row, column) {
      if (this.fdicttypeList.length > 0) {
        for (let i = 0; i < this.fdicttypeList.length; i++) {
          if (row.ftype == this.fdicttypeList[i].value) {
            return this.fdicttypeList[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },
    formatfsiteNo: function(row, column) {
      if (this.getListfsiteNo) {
        for (let i = 0; i < this.getListfsiteNo.length; i++) {
          if (row.fsiteNo === this.getListfsiteNo[i].value) {
            return this.getListfsiteNo[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },
    getList() {
      this.listLoading = true
      listtsSupplier(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list
          this.total = this.list.length;
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        fsupno: undefined,
        fsupname: undefined,
        fstate: undefined,
        fsiteNo: undefined,
        fprovince: undefined,
        fcity: undefined,
        flinkman: undefined,
        fphone: undefined,
        ftelno: undefined,
        femail: undefined,
        fofficeaddress: undefined,
        fupddate: undefined,
        foperator: undefined,
        ftype: undefined,
        id: undefined
      }
    },
    handleCreate() {
      this.resetForm()
      this.dialogStatus = 'create'
      if (this.$store.state.user.fsiteLevel == 3) {
        this.dataForm.fsiteNo = this.$store.state.user.fsiteNo
      }
      this.dataForm.ftype = '1'
      this.dataForm.fstate = 1
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id
          this.dataForm.fupddate = new Date()
          this.dataForm.fsupkind=1;
          createtsSupplier(this.dataForm)
            .then((response) => {
              this.list.unshift(response.data.data)
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '添加供应商资料成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response.data.data
              })
            })
        }
      })
    },
    handleUpdate(row) {
      this.dataForm = Object.assign({}, row)
      this.dataForm.fsiteNo=row.fsiteno;
      this.dialogStatus = 'update'
      this.dataForm.ftype = this.dataForm.ftype.toString()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id
          this.dataForm.fupddate = new Date()
          updatetsSupplier(this.dataForm, this.$route.query.id)
            .then(() => {
              for (const v of this.list) {
                if (v.fsupno === this.dataForm.fsupno) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新供应商资料成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response.data.data
              })
            })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('是否要删除供应商资料', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletetsSupplier(row)
          .then((response) => {
            this.$notify.success({
              title: '成功',
              message: '删除供应商资料成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
          .catch((response) => {
            this.$notify.error({
              title: '失败',
              message: response.data.data
            })
          })
      })
    },
    indexMethod(index) {
      index = index + 1
      return index
    }
  }
}
</script>